<!-- 公告新闻 -->
<template>
  <div class="news">
    <!-- 公告新闻的标题 -->
    <div class="news__title">
      <h2>公告新闻</h2>
    </div>
    <!-- 公告新闻的内容 -->
    <div class="news_content">
      <div class="news_content--gonggao">
        <div class="gonggao__header">
          <h3>小区公告</h3>
          <p @click="showFlag = !showFlag">{{showFlag ? '查看所有' : '查看最新五条公告'}}</p>
        </div>
        <div class="gonggao__container">
          <ul>
            <li v-for="(value,index) in showFlag ? spliceList : newsList" :key="value.newsId" @click="showDetailsNews(value.newsId)">
              <div class="gonggao__container--item">
                <h4>{{value.newsTitle}}</h4>
                <p>{{value.newsTime}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="news_content--hot">
        <div class="hot__header">
          <h3>热点新闻</h3>
        </div>
        <div class="hot__container">
          <el-skeleton :loading="loading" animated :count="3">
            <template slot="template">
              <div style="display:flex;width:100%;margin-top: 20px;">
                <el-skeleton-item variant="image" style="width: 300px; height: 150px;" :throttle="500" />
                <div style="width:70%;margin-top:20px;margin-left:20px;position: relative;">
                  <el-skeleton-item variant="h2" style="width: 80%;" />
                  <el-skeleton-item variant="text" style="width: 10%;position: absolute;bottom: 0;left: 0;" />
                  <el-skeleton-item variant="text" style="width: 10%;position: absolute;bottom: 0;left: 100px;" />
                </div>
              </div>
            </template>
            <template>
              <ul class="scroll__item">
                <li v-for="(value,index) in hotNewsList" :key="value.uniquekey" style="margin-top: 20px;">
                  <div class="hot__container--item">
                    <div class="item__img">
                      <a :href="value.url" target="_blank">
                        <el-image style="width: 300px; height: 150px;" :src="value.thumbnail_pic_s"></el-image>
                      </a>
                    </div>
                    <div class="item__right">
                      <h3>
                        <a :href="value.url" target="_blank">{{value.title}}</a>
                      </h3>
                      <p>{{value.author_name}}</p>
                      <p style="left:100px">{{value.date | formatDate}}</p>
                    </div>
                  </div>
                </li>
              </ul>
            </template>
            <div class="load" type="text" @click="loadNews" v-if="!requestFlag">点击加载更多...</div>
            <div v-else class="load--turning">
              <span></span>
            </div>
          </el-skeleton>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNews, findAllNews } from '../api/index';
export default {
  name: '',
  props: [''],

  data() {
    return {
      newsList: [],
      spliceList: [],
      showFlag: false,
      // 加载骨架
      loading: false,
      /**
       * uniquekey 新闻ID
       * author_name 新闻来源
       * is_content 是否有新闻内容
       *  */
      hotNewsList: [],
      originList: [],
      // 新闻请求第几页
      page: 1,
      requestFlag: false,
    };
  },
  filters: {
    formatDate: function (val) {
      return val.split(' ')[0];
    },
  },
  components: {},
  computed: {
    disabled() {
      return this.loading;
    },
  },
  created() {
    this.getAllNews(this.page);
    this.getNewsList();
  },
  beforeMount() {},

  methods: {
    // 获取所有公告
    getAllNews() {
      findAllNews().then((res) => {
        if (res.code === 200) {
          res.data.forEach((d) => {
            if (d.newsTime) {
              d.newsTime = d.newsTime.split('T')[0];
            }
          });
          this.newsList = JSON.parse(JSON.stringify(res.data.reverse()));
          this.spliceList = res.data.splice(0, 5);
        }
      });
    },
    // 请求新闻
    getNewsList() {
      getNews('top', this.page).then((res) => {
        if (res.error_code == 0) {
          this.loading = false;
          this.originList = this.originList.concat(JSON.parse(JSON.stringify(res.result.data)));
          this.hotNewsList = this.hotNewsList.concat(res.result.data.splice(0, 10));
        } else {
          this.loading = true;
        }
      });
    },
    // 请求新的新闻
    loadNews() {
      this.requestFlag = true;
      setTimeout(() => {
        if (this.hotNewsList.length >= this.originList.length) {
          this.getNewsList(++this.page);
        }
        if (this.originList.length < this.hotNewsList.length + 10) {
          let arr = this.originList.splice(this.hotNewsList.length, this.originList.length);
          this.hotNewsList = this.hotNewsList.concat(arr);
        } else {
          this.hotNewsList = this.hotNewsList.concat(this.originList.splice(this.hotNewsList.length, this.hotNewsList.length + 10));
        }
        this.requestFlag = false;
      }, 500);
    },

    // 查看详细公告
    showDetailsNews(id) {
      this.$router.push({
        path: '/newsDetails',
        query: {
          id,
        },
      });
    },
  },
  watch: {},
};
</script>

<style scoped lang="scss">
.news {
  width: 100%;
  .news__title {
    width: 100%;
    height: 220px;
    background: url('../assets/imgs/blue_top.png') no-repeat;
    background-size: cover;
    h2 {
      color: #fff;
      font-size: 50px;
      line-height: 220px;
      text-align: center;
      letter-spacing: 0.5rem;
    }
  }
  .news_content {
    padding: 0 220px;
  }
  .news_content--gonggao {
    margin-top: 10px;
    .gonggao__header {
      height: 42px;
      line-height: 42px;
      border-bottom: 1px solid #bfcce5;
      display: flex;
      justify-content: space-between;
      h3 {
        float: left;
        color: #5184eb;
        font-size: 20px;
        line-height: 39px;
        border-bottom: 4px solid #5184eb;
      }
      p {
        &:hover {
          cursor: pointer;
          color: #6393f3;
        }
      }
    }
    .gonggao__container {
      margin-top: 10px;
      .gonggao__container--item {
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
        h4 {
          &:hover {
            cursor: pointer;
            color: #6393f3;
          }
        }
      }
    }
  }
  .news_content--hot {
    .hot__header {
      height: 42px;
      line-height: 42px;
      border-bottom: 1px solid #bfcce5;
      h3 {
        float: left;
        font-weight: bold;
        color: #5184eb;
        font-size: 20px;
        line-height: 39px;
        border-bottom: 4px solid #5184eb;
      }
    }
    .hot__container {
      margin-bottom: 20px;
      .hot__container--item {
        display: flex;
        justify-content: flex-start;
        padding: 10px;
        border-bottom: 1px solid #e6e6e6;

        .item__img {
          // overflow: hidden;
          width: 300px;
          height: 150px;
          a {
            display: inline-block;
            width: 300px;
          }
        }
        .el-image {
          transition: all 0.3s ease-out;
          &:hover {
            transform: scale(1.05);
          }
        }
        .item__right {
          margin-top: 20px;
          margin-left: 20px;
          position: relative;
          h3 {
            font-size: 20px;
            a {
              color: #000;
              &:hover {
                cursor: pointer;
                color: #6393f3;
              }
            }
          }
          p {
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
        &:hover {
          background-color: #f3f6f8;
        }
      }
      .load {
        text-align: center;
        margin: 10px 0;
        &:hover {
          cursor: pointer;
          color: #6393f3;
        }
      }
      .load--turning {
        display: flex;
        justify-content: center;
        span {
          text-align: center;
          margin: 10px 0;
          display: inline-block;
          width: 20px;
          height: 20px;
          border: 2px solid #409eff;
          border-left: transparent;
          animation: zhuan 0.5s linear infinite;
          border-radius: 50%;
        }
      }
    }
  }
}
@keyframes zhuan {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>